<template>
  <div class="processes-wrapper">
    <v-select v-model="selected" id="process-list"
              :options="processes" label="name"
              placeholder="Select process">
      <template slot="option" slot-scope="option">
          <svg v-if='option.name === "csgo.exe"' class="steam-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M9.406 17.183c.431-1.025-.05-2.206-1.076-2.637l-1.762-.741c.331-.125.654-.182.982-.183 1.518 0 2.765 1.236 2.779 2.754.014 1.538-1.217 2.792-2.753 2.806-1.159.005-2.138-.684-2.571-1.665l1.763.741c1.027.432 2.207-.05 2.638-1.075zm9.594-17.183h-14c-2.761 0-5 2.239-5 5v6.043l5.585 2.349c.596-.39 1.283-.599 2.046-.583l3.017-4.221c.048-2.541 2.122-4.588 4.674-4.588 2.582 0 4.678 2.094 4.678 4.677 0 2.581-2.098 4.703-4.732 4.675l-4.115 3.067-.009.004c-.012 1.962-1.593 3.558-3.561 3.577-1.777.015-3.234-1.249-3.56-2.895l-4.023-1.692v3.587c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-3.678 11.857c-1.752 0-3.179-1.427-3.179-3.18 0-1.753 1.427-3.179 3.179-3.179 1.754 0 3.179 1.426 3.179 3.179s-1.425 3.18-3.179 3.18zm0-.779c1.325 0 2.4-1.077 2.4-2.401 0-1.323-1.075-2.401-2.4-2.401-1.324 0-2.401 1.078-2.401 2.401 0 1.324 1.077 2.401 2.401 2.401z"/>
          </svg>
          {{ `${option.name} [${option.pid}]` }}
      </template>
    </v-select>
  </div>
</template>

<script lang="ts">

  import EventBus from '../../bus';

  const psList = require('ps-list');

  export default {
    name: 'process-select',
    methods: {
      refreshProcessList () {
        psList().then(ps => this.processes = ps);
      }
    },
    data () {
      return {
        selected: null,
        processes: []
      }
    },
    mounted () {
      document
        .querySelector('.v-select input[type=search]')
        .addEventListener('click', this.refreshProcessList);
    },
    watch: {
      selected: {
        handler: val => {
          EventBus.$emit('process', val);
        },
        deep: true
      }
    }
  }

</script>

<style lang="scss" scoped>

  .processes-wrapper {
    width: 100%;
    max-width: 450px;
    white-space: nowrap;
  }

  #process-list {
    display: block;
    font-weight: 500;
    background: #3b3c4a;
    width: 100%;
    border-radius: 0;
    margin-top: 30px;
    font-size: 1rem;
    height: 2rem;
    line-height: 2rem;
    transition: all .2s ease-in-out;
    text-shadow: 0 0 1px black;
    float: left;
  }

</style>

<style lang="scss">

  $darken-percent: 20%;

  .v-select input[type=search] {
    color: darken(#fff, $darken-percent);
  }

  .v-select li > a {
    color: darken(#fff, $darken-percent);
  }

  .v-select .dropdown-menu > .highlight > a {
    background: #f62f6d;
    color: darken(#fff, $darken-percent);
  }

  .v-select .dropdown-menu .active > a {
    color: darken(#fff, $darken-percent);
    background: #23242c;
  }

  .v-select.single .selected-tag {
    color: darken(#fff, $darken-percent);
  }

  .dropdown-menu {
    background: #3b3c4a !important;
  }

  .dropdown-menu::-webkit-scrollbar-track {
    border-radius: 6px;
  }

  .dropdown-menu::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  .dropdown-menu::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #555;
  }

  .steam-svg {
    position: relative;
    top: -1px;
    vertical-align: middle;
    fill: darken(#fff, $darken-percent);
    width: 16px;
  }

</style>
